package radio

import "github.com/templui/templui/internal/utils"

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Name       string
	Value      string
	Form       string
	Disabled   bool
	Checked    bool
}

templ Radio(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<input
		type="radio"
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Name != "" {
			name={ p.Name }
		}
		if p.Value != "" {
			value={ p.Value }
		}
		if p.Form != "" {
			form={ p.Form }
		}
		checked?={ p.Checked }
		disabled?={ p.Disabled }
		class={
			utils.TwMerge(
				"relative h-4 w-4",
				"before:absolute before:left-1/2 before:top-1/2",
				"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
				"appearance-none rounded-full",
				"border-2 border-primary",
				"before:content[''] before:rounded-full before:bg-background",
				"checked:border-primary checked:bg-primary",
				"checked:before:visible",
				"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
				"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
				"disabled:cursor-not-allowed",
				p.Class,
			),
		}
		{ p.Attributes... }
	/>
}
